<template>
  <div class="personCenter">
    <div class="personWrapper">
      <HeaderComp />
    <div class="centerComp">
      <CenterComp />
    </div>
    </div>
  </div>
</template>
<script setup>
import HeaderComp from "./Header";
import CenterComp from "./Center";
import { myInfo } from "@/service/personalCenter";
import { useUserStore } from "@/stores/User";
import { onMounted } from 'vue';
import avatar from "@/static/image.png";
const userStore = useUserStore();

onMounted(() => {
  myInfo().then(res => {
    if(res.code === '000000') {
      userStore.personalDetailInfo = res.data;
      if(res.data.avatar) {
        userStore.personalDetailInfo.avatar = res.data.avatar;
      } else {
        userStore.personalDetailInfo.avatar = avatar;
      }
    }
  });
});
</script>

<style lang="scss" scoped>
.personCenter {
  // margin: 0 180px;
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .personWrapper{
    width:1000px;
    .centerComp {
    margin-bottom: 20px;
  }
  }
 
}
</style>
